<template>
      <div class="mainText main">
    
 
    <div class="table-container scroll-wrap mt-16">
        <div class="scroll-cont cont0">
            <div class="ztreeTable">
                <div class="goodsTree">
        <el-tree class="ztree" :data="CustomerSeasList" :props="treeProps" @node-click="handleNodeClick"></el-tree>
                    <!-- <ul class="contextMenu">
                        <li>新增私海</li>
                        <li>修改私海</li>
                        <li>删除私海</li>
                    </ul> -->
                </div>
               
            </div>
           
        </div>
        <div class="scroll-bar bar0" style="display: none;">
            <div class="scroll-slider slider0"></div>
        </div>
    </div>

<el-row :gutter="20">
    <el-col :span="11">
        <el-table
            ref="staffTable"
            v-loading="listLoading"
            :key="tableKey"
            :data="staffList"
            border
            fit
            highlight-current-row
            @selection-change="handleStaffChange"
        >
            <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
            <el-table-column label="手机" align="center">
              <template slot-scope="{row}">
                <span>{{ row.phone }}</span>
              </template>
            </el-table-column>

            <el-table-column label="昵称" align="center">
              <template slot-scope="{row}">
                <span>{{ row.nickName }}</span>
              </template>
            </el-table-column>
        </el-table>
    </el-col>
    <el-col :span="2" style="text-align:center;">
        <el-button
            @click="addStaff"
            type="primary"
            :disabled="!staffData.length"
            icon="el-icon-arrow-right"
            circle
        ></el-button>
        <el-button
            @click="removeStaff"
            type="primary"
            :disabled="!selectedStaffData.length"
            icon="el-icon-arrow-left"
            circle
            style="margin-left: 0;margin-top: 10px;"
        ></el-button>
    </el-col>
    <el-col :span="11">
        <el-table
            ref="selectedStaffTable"
            v-loading="listLoading"
            :key="tableKey"
            :data="selectedStaffList"
            border
            fit
            highlight-current-row
            @selection-change="handleSelectedStaffChange"
          >
            <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
            <el-table-column label="手机" align="center">
              <template slot-scope="{row}">
                <span>{{ row.phone }}</span>
              </template>
            </el-table-column>

            <el-table-column label="昵称" align="center">
              <template slot-scope="{row}">
                <span>{{ row.nickName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="类型" align="center">
              <template slot-scope="{row}">
                <el-select class="filter-item" placeholder="请选择" v-model="row.staffTypeId">
                  <el-option
                    v-for="item in staffOptions"
                    :key="item.key"
                    :label="item.display_name"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
        </el-table>
    </el-col>
</el-row>


</div>
</template>

<script>
export default {
  data () {
    return {
      // 穿梭框
      listLoading: true,
    staffTemp: {
        phone: "",
        nickName: "",
        staffTypeId: ""
      },
    staffList: [],
    selectedStaffList: [],
    staffData: [],
    selectedStaffData: [],
    tableKey: 0,
    rowKey: "rowKey",
    staffOptions: [
        { key: 28, display_name: "补货员" },
        { key: 29, display_name: "测试员" }
      ],



        // 所有客户海列表
      CustomerSeasList: [
      ],
      // 树形控件的属性绑定对象
      treeProps: {
        label: 'name',
        children: 'seaList' 
      },
      // 默认选中的节点Id值数组
      defKeys: [],
    }
  },
  created () {
    this.getSeasList()
    // this.queryList()
  },
  mounted() {
      
  },
  methods: {


         // 请求客户海列表
    async getSeasList(){
       const {data:res} = await this.$http.get('/customer/seaManage/seaStores')
      let arr1 =  res.body
       arr1.forEach(function (item, i) {
          item.name = item.storeName
          if(item.seaList) {
              item.seaList.forEach(function (items, i) {
                  items.name = items.seaName
              })
          }
      })
      this.CustomerSeasList = res.body
      console.log(this.CustomerSeasList);
       
    },
      handleNodeClick(data) {
        console.log(data);
      },


// 穿梭框
    // 从后台获取左边表格的数据
    getStaffList() {
      fetchStaffList(this.staffTemp).then(res => {
        if (res.value.staff.length === 0) {
          alert("查无此人");
        }
        this.staffList = res.value.staff;
      });
    },
    // 将左边表格选择项存入staffData中
    handleStaffChange(rows) {
      this.staffData = [];
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.staffData.push(row);
          }
        });
      }
    },
    // 左边表格选择项移到右边
    addStaff() {
      setTimeout(() => {
        this.$refs["staffTable"].clearSelection();
        this.$refs["selectedStaffTable"].clearSelection();
      }, 0);
      let repeat = false;
      this.selectedStaffList.forEach(item => {
        if (this.staffData[0] && item.phone === this.staffData[0].phone) {
          repeat = true;
          alert("此员工已添加");
          return;
        }
      });
      if (repeat === false) {
        this.staffData.forEach(item => {
          this.selectedStaffList.push(item);
        });
        for (let i = 0; i < this.staffList.length; i++) {
          for (let j = 0; j < this.staffData.length; j++) {
            if (
              this.staffList[i] &&
              this.staffData[j] &&
              this.staffList[i].phone === this.staffData[j].phone
            ) {
              this.staffList.splice(i, 1);
            }
          }
        }
      }
    },
    // 右边表格选择项移到左边
    removeStaff() {
      setTimeout(() => {
        this.$refs["staffTable"].clearSelection();
        this.$refs["selectedStaffTable"].clearSelection();
      }, 0);
      this.selectedStaffData.forEach(item => {
        this.staffList.push(item);
      });
      for (let i = 0; i < this.selectedStaffList.length; i++) {
        for (let j = 0; j < this.selectedStaffData.length; j++) {
          if (
            this.selectedStaffList[i] &&
            this.selectedStaffData[j] &&
            this.selectedStaffList[i].phone === this.selectedStaffData[j].phone
          ) {
            this.selectedStaffList.splice(i, 1);
          }
        }
      }
    },
    // 将右边表格选择项存入selectedStaffData中
    handleSelectedStaffChange(rows) {
      this.selectedStaffData = [];
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.selectedStaffData.push(row);
          }
        });
      }
    },
    // 提交
    modifyStaff() {
      let isEmpty = false;
      this.selectedStaffList.forEach(item => {
        if (!item.staffTypeId) {
          alert("请选择类型");
          isEmpty = true;
          return;
        }
      });
      if (isEmpty === false) {
        editStaff(this.selectedStaffList, this.deviceQuery.id).then(res => {
          this.staffListVisible = false;
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success",
            duration: 2000
          });
        });
      }
    }



  }
  
}
</script>

<style>
        .ztreeTable{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .ztreeTable .table1{
            width: calc(100% - 240px);
        }
        .contextMenu{
            position: absolute;
            font-size: 12px;
            color: #333;
            border: 1px solid #e0e0e0;
            background: #fff;
        }
        .contextMenu li{
            width: 100px;
            text-align: center;
            padding: 0 10px;
            line-height: 30px;
            cursor: pointer;
        }
        .contextMenu li.selected{
            background: #f3f3f3;
        }
</style>


